<!DOCTYPE html>
<html>
<head>
    <title>socketio 指定房间</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
          charset="UTF-8"/>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            text-align: center;
        }
        .btn {
            line-height: 24px;
            text-align: center;
            font-size: 14px;
            border: 1px solid blue;
            background-color: #fff;
            margin-bottom: 20px;
            padding: 0 10px;
        }
        .message {
            position: fixed;
            bottom: 0;
            width: 100%;
            padding: 10px;
            font-size: 14px;
            color: #000;
        }
    </style>
<script src="https://cdn.bootcdn.net/ajax/libs/socket.io/3.0.0-rc4/socket.io.js"></script>"

</head>
<body>
<div class="box">
    <div class="message" id="message"></div>
    <br/>
    <button class="btn" onclick="wsReq()">connect</button>
    <button class="btn" onclick="echo()">request echo</button>
    <button class="btn" onclick="closews()">close</button>
</div>

<script>

let connected = false;
let nums = 0;
//建立websocket连接，连接断开时，socket.io 会自动重新连接的
const socket = io('ws://127.0.0.1:8092/room');

socket.on('echo', msg => {
    console.log('recv info frome server:' + msg);
})

//下面为socket.io内置事件
socket.on('connect', function(data){
    //连接正常的事件
    console.log(JSON.stringify(data) + ' - connect');
    connected = true;
});
socket.on('disconnect', function(data){
    //失去连接的事件
    console.log(JSON.stringify(data)+ ' - disconnect');
    connected = false;
    // //主动关闭，否则会一直重连(如果需要本身就是需要重连，则不需要调用下面关闭代码)
    socket.disconnect();
});

//加上io 才能捕获异常
socket.io.on('connect_error', function(data){
    console.log(JSON.stringify(data)+ ' - connect_error');
});
socket.io.on('connect_timeout', function(data){
    console.log(JSON.stringify(data)+ ' - connect_timeout');
});
socket.io.on('error', function(data){
    console.log(JSON.stringify(data) + ' - error');
    connected = false;
    socket.disconnect();
});

//下面这些内置事件，测试没有输出
socket.io.on('reconnect', function(data){
    console.log(JSON.stringify(data) + ' - reconnect');
});
socket.on('reconnect_attempt', function(data){
    console.log(JSON.stringify(data)+ ' - reconnect_attempt');
});
socket.on('reconnecting', function(data){
    console.log(JSON.stringify(data)+ ' - reconnecting');
});
socket.on('reconnect_error', function(data){
    console.log(JSON.stringify(data)+ ' - reconnect_error');


});
socket.on('reconnect_failed', function(data){
    console.log(JSON.stringify(data)+ ' - reconnect_failed');
});
socket.on('ping', function(data){
    console.log(JSON.stringify(data)+ ' - ping');
});
socket.on('pong', function(data){
    console.log(JSON.stringify(data)+ ' - pong');
});

function closews() {
    if (connected){
        console.log("close");
        connected = false;
        socket.disconnect();
    }
}

function echo() {
    socket.emit('echo', 'client send to server:' + nums++);
};

function wsReq(){
    if (!connected)
    {
        socket.connect();
    }
};


// console.log(window.location.host);
// console.log(window.location.href);

</script>
</body>
</html>
